<template>
  <div class="profile">
    <!-- 导航条 -->
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料"></van-nav-bar>

    <!-- 编辑区 -->
    <van-cell-group>
      <van-cell is-link title="头像"  center>
        <van-uploader :after-read="afterRead">
        <van-image
          :src='user.photo'
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
        />
        </van-uploader>
      </van-cell>

      <van-cell is-link title="名称" :value="user.name" @click="showName=true"/>
      <!-- 修改名称 -->
      <van-dialog v-model="showName" title="修改用户名" show-cancel-button @confirm=editName>
        <van-field v-model="newName" label='用户名'  />
      </van-dialog>
      <!-- 修改名称 -->
      <van-cell is-link title="性别" :value="user.gender===1?'女':'男'" @click="showGender=true"/>
      <!-- 修改性别 -->
      <van-action-sheet
        v-model="showGender"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @select="editGender"
      />
      <!-- 修改性别 -->
      <van-cell is-link title="生日" :value="user.birthday" @click="showBirthday=true"/>
      <!-- 修改生日 -->
      <van-datetime-picker
      v-if="showBirthday"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm=editBirthday
        @cancel='showBirthday=false'
      />
      <!-- 修改生日 -->
    </van-cell-group>
  </div>
</template>

<script>
import { reqGetMyProfile, reqEditMyProfile, reqEditMyPhoto } from '@/api/profile'
import dayjs from 'dayjs'
export default {
  name: 'userProfile',
  data () {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前用户的信息
      user: {},
      newName: '',
      actions: [{ name: '男', value: 0 }, { name: '女', value: 1 }],
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 11, 1),
      currentDate: new Date()
    }
  },

  async created () {
    const res = await reqGetMyProfile()
    this.user = res.data
    this.newName = res.data.name
  },
  methods: {
    async editName () {
      await reqEditMyProfile({ name: this.newName })
      this.$toast.success('修改用户名成功')
      this.user.name = this.newName
    },
    async editGender (item) {
      await reqEditMyProfile({ gender: item.value })
      this.user.gender = item.value
      this.show = false
    },
    async editBirthday (value) {
      const birthday = dayjs(value).format('YYYY-MM-DD')
      await reqEditMyProfile({ birthday })
      this.$toast.success('修改生日成功')
      this.user.birthday = birthday
      this.showBirthday = false
    },
    async afterRead (file) {
      const formData = new FormData()
      formData.append('photo', file.file)
      this.$toast.loading({
        message: '文件上传中...',
        forbidClick: true
        // overlay: true
      })
      // 此时可以自行将文件上传至服务器
      const res = await reqEditMyPhoto(formData)
      this.user.photo = res.data.photo
      this.$toast.success('上传成功!')
    }

  }
}
</script>

<style lang="scss">

</style>
